<template>
<view class="ksp-editor">
	<view class="body">
		<view class="content font14">
			<view class="node font14" v-for="(node, index) in nodes" :key="node.id">
				<textarea placeholder-class="font4 colorccc" placeholder="请输入内容" @blur="textBlur($event, index)" @input="textChange($event, node)" class="text font14" auto-height="true" maxlength="-1" v-if="node.type == 'text'" :cursor="node.cursor" :value="node.content"></textarea>
				<image @load="imageLoad($event, node)" class="image" :style="{width: node.width, height: node.height}" v-if="node.type == 'image'" :src="node.url"></image>
				<image @tap="deleteImage($event, node, index)" class="btn-delete" v-if="node.type == 'image'" src="@/static/image/icons/del.png"></image>
			</view>
		</view>
	</view>
	<view class="toolbar flex alignCenter justConBetween">
		<image @tap="selectImage" class="btn-img" src="@/static/image/icons/pic.png"></image>
		<!-- <button @tap="save" class="btn-save">保存</button> -->
		<!-- <view @click="save" class="noWidthBtn"><i class="iconfont icon-fabu"></i>提交</view> -->
	</view>
</view>
</template>

<script>
export default {
	props: {
		list: {
			default: null
		}
	},
	data() {
		return {
			sequence: 0,
			selection: {
				index: 0,
				cursor: 0
			},
			nodes: [],
			url: "http://ehome-totem.img-cn-shenzhen.aliyuncs.com/1912021526894820202354639.png"
		};
	},
	mounted() {
		this.initNodes();
	},
	methods: {
		obtainSequence() {
			this.sequence++;
			return this.sequence;
		},
		initNodes() {
			var list = this.list || [];
			if (Object.prototype.toString.call(list) != "[object Array]") {
				throw new Error("数据格式不正确！")
			}
			var nodes = [];
			for(var i = 0; i < list.length; i++) {
				var ele = list[i];
				if (ele.type == "text") {
					var node = {};
					node.type = "text";
					node.id = this.obtainSequence();
					node.content = ele.content || "";
					nodes.push(node);
				} else if (ele.type == "image") {
					var node = {};
					node.type = "image";
					node.id = this.obtainSequence();
					node.width = "100px";
					node.height = "100px";
					node.url = ele.url || "";
					nodes.push(node);
				}
			}
			this.nodes = nodes;
			this.trimNodes();
		},
		trimNodes() {
			var list = this.nodes;
			var nodes = [];
			var temp = null;
			for(var i = 0; i < list.length; i++) {
				var node = list[i];
				if (node.type == "image") {
					nodes.push(node);
					temp = null;
					continue;
				}
				if (!temp) {
					temp = node;
					nodes.push(temp);
					continue;
				}
				if (node.type == "text") {
					temp.content += node.content;
				}
			}
			if (nodes.length == 0 || nodes[nodes.length - 1].type != "text") {
				var node = {};
				node.id = this.obtainSequence();
				node.type = "text";
				node.content = "";
				nodes.push(node);
			}
			this.nodes = nodes;
		},
		imageLoad(ev, node) {
			var query = uni.createSelectorQuery().in(this);
			query.select(".content").boundingClientRect((data) => {
				var cw = data.width;
				var iw = ev.detail.width;
				var ih = ev.detail.height;
				node.width = cw + "px";
				node.height = ih / iw * cw + "px";
			}).exec();
		},
		textChange(ev, node) {
			node.content = ev.detail.value;
			setTimeout(() => {
				node.cursor = 1;
			}, 500)
		},
		textBlur(ev, index) {
			this.selection.index = index;
			this.selection.cursor = ev.detail.cursor;
		},
		selectImage() {
			this.$emit("selectImage");
		},
		addImage(url) {
			var index = this.selection.index;
			var cursor = this.selection.cursor;
			var snode = this.nodes[index];
			var content = snode.content;
			if (cursor == 0) {
			} else if (cursor < content.length) {
				snode.content = content.substring(0, cursor);
				var node = {};
				node.id = this.obtainSequence();
				node.type = "text";
				node.content = content.substring(cursor);
				this.nodes.splice(index + 1, 0, node);
				index++;
			} else {
				index++;
			}
			var node = {};
			node.id = this.obtainSequence();
			node.type = "image";
			node.url = url;
			node.width = "100px";
			node.height = "100px";
			this.nodes.splice(index, 0, node);
			this.trimNodes();
		},
		deleteImage(ev, node, index) {
			uni.showModal({
				content: '你确定删除吗？',
				success: (res) => {
					if (!res.confirm) {
						return;
					}
					this.nodes.splice(index, 1);
					if (this.selection.index > index) {
						this.selection.index--;
					}
					this.trimNodes();
					var url = node.url;
					this.$emit("deleteImage", {url: url});
				}
			});
		},
		save() {
			var result = [];
			for(var i = 0; i < this.nodes.length; i++) {
				var node = this.nodes[i];
				var ele = {};
				ele.type = node.type;
				if (node.type == "text") {
					ele.content = node.content;
				} else if (node.type == "image") {
					ele.url = node.url;
				}
				result.push(ele);
			}
			this.$emit("save", {result: result});
		}
	},
	watch: {
		"list": function() {
			this.initNodes();
		}
	}
}
</script>

<style scoped lang="scss">
@import "@/static/public.scss";
/* .ksp-editor {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0upx;
	top: 0upx;
} */
.ksp-editor {
	position: relative;
	width: 100%;
	height: 500rpx;
}
.toolbar {
	position: absolute;
	width: 100%;
	padding: 10rpx 20rpx;
	left: 0upx;
	bottom: 0upx;
	box-sizing: border-box;
	border-top: 1px solid $bordercolor;
	// background: #F8F8F8;
	// .noWidthBtn{
	// 	i{
	// 		vertical-align: middle;
	// 		display: inline-block;
	// 		margin-right:10rpx;
	// 	}
	// }
}
.btn-img {
	// position: absolute;
	width: 60upx;
	height: 60upx;
	// left: 60upx;
	// top: 20upx;
}
.btn-save {
	position: absolute;
	right: 30upx;
	top: 15upx;
	font-size: 30upx;
	line-height: 30upx;
	padding: 20upx;
	color: #333333;
}
.body {
	position: absolute;
	left: 0upx;
	right: 0upx;
	top: 0upx;
	bottom: 100upx;
	background: white;
}
.content {
	position: absolute;
	left: 20upx;
	right: 20upx;
	top: 20upx;
	bottom: 20upx;
	overflow-y: auto;
}
.node {
	position: relative;
	overflow: hidden;
}
.text {
	width: 100%;
	font-size: 36upx;
}
// .placeholderClass{
// 	font-size: 28rpx;
// }
.btn-delete {
	position: absolute;
	width: 50rpx;
	height: 50rpx;
	right: 10rpx;
	top: 10rpx;
	background: rgba(0, 0, 0, .6);
	border-radius: 50%;
	padding: 10rpx;
	box-sizing: border-box;
}
textarea{
	font-size: 28rpx !important;
}
</style>
